<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是AngularJs框架实现的城市管理首页</title>
    <!--1.引入bootstrap样式框架；-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!--2.引入angularJS分页样式的框架；-->
    <link rel="stylesheet" href="angularjs/pagination.css">

    <!--3.引入bootstrap中的Jquery框架；-->
    <script src="bootstrap/js/jquery.min.js"></script>
    <!--4.引入bootstrap中的Js框架；-->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <!--5.引入AngularJS的JS框架-->
    <script src="angularjs/angular.min.js"></script>

    <!--6.引入AngularJS分布的JS框架-->
    <script src="angularjs/pagination.js"></script>

    <!--7.自己写的代码：-->
    <script>
        var  app = angular.module('cityApp',['pagination']);    //定义一个模块； cityApp
        app.controller("cityCtrl",function ($scope, $http) {    //定义一个控制器； cityCtrl  ,  $http 调用接口！  http://localhost:8080/citys/list
            // 分页配置如下：
            $scope.paginationConf = {
                currentPage : 1,   //当前页；
                itemsPerPage : 5 , //每页5条;
                totalItems:   100,  //共计多少条数据；
                perPageOptions : [2,5,10,20],
                onChange : function () {
                    //每次改变页面大小，自动 调用；
                    $scope.getAllByPages($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);   // index, size
                }
            };

            // $scope,searchEntity ={}; //查询条件； 所有的查询条件都存储在$scope中；

            /*   $scope.getAllCitys = function () {    //自定义一个查询的方法；不带分页的方法；
                       $http.get("/citys/list").success(function (data) {
                               $scope.list = data.rows;      // 把查询到的json中的rows赋值给list;
                       });
                   }*/
            $scope.getAllByPages = function (index, size) {
                $http.get("/citys/getAllByPages?index="+index+"&size="+size).success(function (data) {
                    $scope.list = data.rows;      // 把查询到的json中的rows赋值给list;
                    $scope.paginationConf.totalItems = data.total;
                });
            };

            $scope.getAllProvinces = function () {
                $http.get("/citys/getAllProvince").success(function (data) {
                    $scope.plist = data;   //查询所有的省；
                    $scope.plist.unshift({"cId":"0","cName":"--所有省--","fId":"0"});
                });
            };


            //打开添加省份的模态框；
            $scope.updateCity = function (cid) {
                //0. 先查询所有的省；
                $http.get("/citys/getAllProvince").success(function (data) {
                    $scope.plist2 = data;   //查询所有的省；

                });
                //1.先查询原来的数据；
                $http.get("/citys/getCityByCid?cId="+cid).success(function (data) {
                    $scope.entity = data;   //将查询到的数据赋值给entity;
                });


                //2.打开模态框；
                $("#myModal").modal("show");
                //3.提交修改的数据；
            };




            //删除
            $scope.delete=function (cid) {
                layerIndex = layer.load(1);  //1：代表动画加载；！！！！
                $http.get("/citys/delete?cid="+cid).success(function (data) {
                $scope.list=data.rows;
                })
            }
        });


    </script>
</head>
<body  ng-app="cityApp"  ng-init="getAllProvinces()"   ng-controller="cityCtrl">


<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h1>AngularJs框架实现的城市管理首页</h1>
        </div>
        <div class="panel-body">

            {{entity}}
            <form class="form-inline">
                <input class="form-control" name="cId" placeholder="请输入城市id "/>
                <input class="form-control" name="cName" placeholder="请输入城市查询关键字。。。"/>

                所在省：
                <select class="form-control" ng-model="searchEntity.cId" ng-init="searchEntity.cId='0'"   ng-options="p.cId as p.cName for p in plist">

                </select>
                <button class="btn btn-success" type="submit">综合查询</button>
            </form>

            <table class="table table-bordered table-hover table-striped table-condensed text-center">
                <tr>
                    <td>编号</td>b
                    <td>城市名</td>
                    <td>上一级ID</td>
                    <td>操作</td>
                </tr>
                <tr ng-repeat="c in list">
                    <td>{{c.cId}}</td>
                    <td>{{c.cName}}</td>
                    <td>
                        {{c.fId}}
                    </td>

                    <td>
                        <a  ng-click="updateCity(c.cId)" class="btn btn-success">修改</A>
                        <a  ng-click="delete(cId)" class="btn btn-danger">删除</a>
                    </td>
                </tr>


                <tr>
                    <td colspan="4">
                        <!--分页标签一行代码：-->
                        <tm-pagination conf="paginationConf"></tm-pagination>
                    </td>
                </tr>
            </table>
        </div>
        <div class="panel-footer text-right">
            AngularJs框架实现的城市管理首页
        </div>
    </div>
</div>




<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">添加或者删除城市</h4>
            </div>
            <div class="modal-body">
                <form>
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label   class="col-sm-4 control-label">城市名称：</label>
                            <div class="col-sm-6">
                                <input type="hidden"  ng-model="entity.cId"  >
                                <input  class="form-control"  ng-model="entity.cName" placeholder="请输入城市名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-4 control-label">省份</label>
                            <div class="col-sm-6">
                                <select  class="form-control"  ng-model="entity.fId" ng-options="p.cId as p.cName for p in plist2"></select>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default">提交保存</button>
                            </div>
                        </div>
                    </form>
                </form>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-primary">提交保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>

</html>